<template>
  <div id="category">
    <!-- 面包导航 -->
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>物资管理</el-breadcrumb-item>
      <el-breadcrumb-item>物资分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-button type="warning"  icon="el-icon-circle-plus-outline" @click="openAdd" >添加</el-button>
        </el-col>
      </el-row>
      <!-- 表格部分 -->
      <zk-table
        v-loading="loading"
        style="margin-top:10px;"
        ref="table"
        border
        stripe
        show-index
        :expand-type="false"
        :selection-type="false"
        sum-text="sum"
        index-text="#"
        :data="categorys"
        :columns="columns"
      >
        <!-- 层级 -->
        <template slot="lev" slot-scope="scope">
          <el-tag v-if="scope.row.lev===1">一级分类</el-tag>
          <el-tag type="success" v-else-if="scope.row.lev===2">二级分类</el-tag>
          <el-tag type="danger" v-else>三级分类</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="caozuo" >
          <el-button   type="primary" size="mini" icon="el-icon-edit" @click="edit()"></el-button>
          <el-button  type="danger" size="mini" icon="el-icon-delete" @click="del()"></el-button>
        </template>
      </zk-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top:10px;"
        background

        :show-header="true"
        @size-change=""
        @current-change=""
        :current-page="this.queryMap.pageNum"
        :page-sizes="[5,10, 15, 20, 25,30]"
        :page-size="this.queryMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="20"
      ></el-pagination>
      <!-- 添加弹出框 -->
      <el-dialog title="添加分类" :visible.sync="addDialogVisible" @close="addCloseDialog" width="50%">
        <span>
          <el-form :model="addRuleForm" :rules="addRules" ref="addRuleFormRef" label-width="100px">
            <el-form-item label="分类名称" prop="name">
              <el-input v-model="addRuleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="父分类" prop="pid">
              <el-cascader
                @change="selectParentChange"
                @clear="clearParent"
                :change-on-select="true"
                clearable
                filterable
                style="width:100%"
                :props="selectProps"
                v-model="pKeys"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="addRuleForm.remark"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="addRuleForm.sort" :min="1" :max="10" label="排序"></el-input-number>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add" :disabled="btnDisabled" :loading="btnLoading">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑弹出框 -->
      <el-dialog title="编辑分类" :visible.sync="editDialogVisible" @close="editCloseDialog" width="50%">
        <span>
          <el-form   ref="editRuleFormRef" label-width="100px">
            <el-form-item label="分类名称" prop="name">
              <el-input ></el-input>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" ></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input-number  :min="1" :max="10" label="排序"></el-input-number>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="update" :disabled="btnDisabled" :loading="btnLoading">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        btnLoading: false,
        btnDisabled: false,
        loading:false,
        pKeys: [],
        addDialogVisible: false,
        editDialogVisible: false,
        editRuleForm:[],
        addRuleForm: { pid: "0", name: "", remark: "", sort: "" }, //添加表单
        addRules: {
          name: [
            { required: true, message: "请输入分类名", trigger: "blur" },
            { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
          ],
          remark: [
            { required: true, message: "请输入备注信息", trigger: "blur" }
          ],
          sort: [{ required: true, message: "请输入排序号", trigger: "blur" }]
        },
        total: 0,
        queryMap: { pageNum: 1, pageSize: 5 },
        categorys: [{
          id:'1',
          name:'医疗资源',
          sorl:'1',
          createTime:'2020-12-02',
          modifiedTime:'2020-12-02',
          remark:'123',
          lev:'1'
        }],
      //  parentCategorys: [],
        selectProps: {
          expandTrigger: "hover",
          value: "id",
          label: "name",
          children: "children"
        }, //级联选择器配置项
        columns: [
          {
            label: "分类名称",
            prop: "name"
          },
          {
            label: "排序",
            prop: "sort"
          },
          {
            label: "创建时间",
            prop: "createTime"
          },
          {
            label: "修改时间",
            prop: "modifiedTime"
          },
          {
            label: "备注",
            prop: "remark"
          },
          {
            label: "层级",
            prop: "lev",
            type: "template",
            template: "lev"
          },
          {
            label: "操作",
            type: "template",
            template: "caozuo"
          }
        ]
      };
    },
    methods: {
      async update() {
      },
      //修改
      async edit() {
        this.editDialogVisible = true;
      },
      //删除分类
      async del() {
      },

      //父级分类中改变
      selectParentChange() {
        var len = this.pKeys.length;
        if (len > 0) {
          this.addRuleForm.pid = this.pKeys[len - 1];
        }else{
          this.addRuleForm.pid=0;
        }
      },
      //加载分类数据
      // async getCategoryList() {
      //   const { data: res } = await this.$http.get(
      //   // "productCategory/categoryTree",
      //     {
      //       params: this.queryMap
      //     }
      //   );
      //   if (res.code !== 200) return this.$message.error("分类列表失败");
      //   this.categorys = res.data.rows;
      //   this.total = res.data.total;
      // },
      //加载父级分类数据
      /*async getParentCategoryList() {

      },*/
      //添加分类
      async add() {
            this.addDialogVisible = false;
            /*this.btnLoading=false;
            this.btnDisabled=false;*/
      },
      //改变页码
      handleSizeChange(newSize) {
        this.queryMap.pageSize = newSize;
        //this.getCategoryList();
      },
      //翻页
      handleCurrentChange(current) {
        this.queryMap.pageNum = current;
        //this.getCategoryList();
      },
      //打开添加
      openAdd() {
        this.addDialogVisible = true;
       // this.getParentCategoryList();
      },
      //关闭弹出框
      addCloseDialog() {
       /* this.addRuleForm = {};
        this.pKeys = [];*/
      },
      editCloseDialog(){
       /* this.editRuleForm = {};*/

      },
      clearParent(){
       /* this.addRuleForm.pid='';*/
      }

    }
  };
</script>
